<template>
  <div class="container">
    <!-- 左边 -->
    <div class="left">
      <!-- 园区数据 -->
      <div class="info-wrapper">
        <div class="title">园区管理</div>
        <div class="pard-data">
          <div class="item">
            <div class="label">年度累计收费(元)</div>
            <div class="value">{{ baseInfo.annualIncome }}</div>
          </div>
          <div class="item">
            <div class="label">入驻企业总数(个)</div>
            <div class="value">{{ baseInfo.enterpriseTotal }}</div>
          </div>
          <div class="item">
            <div class="label">月卡车辆总数(辆)</div>
            <div class="value">{{ baseInfo.monthCardTotal }}</div>
          </div>
          <div class="item">
            <div class="label">一体杆总数(台)</div>
            <div class="value">{{ baseInfo.chargePoleTotal }}</div>
          </div>
        </div>
      </div>
      <!-- 图表 -->
      <div class="info-wrapper">
        <div class="title">年度收入统计</div>
        <div class="chart-container">
          <div ref="income" style=" width: 100%; height:100% " />
        </div>
      </div>
      <!-- 合同表格 -->
      <div class="info-wrapper">
        <div class="title">临期合同提醒</div>
        <div class="table-container">
          <custom-table
            ref="table"
            :columns="tableColumns"
            :action-url="'/home/workbench/rentInfo'"
          >
            <template #startTime="{row}">
              {{ row.startTime+'至'+row.endTime }}
            </template>
            <template #operations="{row}">
              <el-button type="text" @click="onRentKeep(row)">续租</el-button>
              <el-button type="text" @click="onRentOut(row)">退租</el-button>
            </template>
          </custom-table>
        </div>
      </div>
    </div>
    <!-- 右边 -->
    <div class="right">
      <div class="info-wrapper">
        <div class="title">快捷入口</div>
        <div class="fast-enter">
          <div class="item" @click="$router.push('/park/enterprise/add?mode=add')">

            <img src="@/assets/add-enterprise.png" alt="">
            <div class="label">添加企业</div>
          </div>
          <div class="item" @click="$router.push('/system/employee')">
            <img src="@/assets/employee-manage.png" alt="">
            <div class="label">员工管理</div>
          </div>
          <div class="item" @click="billVisible=true">
            <img src="@/assets/add-bill.png" alt="">
            <div class="label">添加账单</div>
          </div>
          <div class="item">
            <img src="@/assets/data-screen.png" alt="" @click="$router.push('/bigscreen/home')">
            <div class="label">数据大屏</div>
          </div>
        </div>
      </div>
      <div class="info-wrapper">
        <div class="title">设备告警派单</div>
        <div class="more">
          <el-button type="primary" round style="width:100%" @click="$router.push('/rod/warnList')">更多 <i class="el-icon-arrow-right" /></el-button>
        </div>
      </div>
    </div>
    <!-- 续租弹出框 -->
    <renew-rent :visible.sync="renewVisible" :form="formData" @success="$refs.table.getList()" />
    <!-- <el-dialog
      title="续租合同"
      :visible.sync="visible"
      width="width"
    >
      <el-form ref="form" :model="rentInfo" :rules="rules" label-position="top">
        <el-form-item label="租赁楼宇" prop="buildingId">
          <el-input :placeholder="rentBuildName" disabled />
        </el-form-item>
        <el-form-item label="租赁起止日期" prop="startTime">
          <el-date-picker
            v-model="rentInfo.startTime"
            style="width: 100%"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            :clearable="false"
          />
        </el-form-item>
        <el-form-item label="租赁合同" prop="contractUrl">
          <upload
            ref="uploadRef"
            :file-array="fileArray"
            :file-size="5"
            type="contract"
            tip-content="支持扩展名：.doc .docx .pdf, 文件大小不得超过5M"
            @onSuccess="handlerSuccess"
          />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog> -->
    <!-- 账单弹出框 -->
    <add-bill :visible.sync="billVisible" />
  </div>
</template>

<script>

import { getBaseInfoAPI, getRentInfoAPI } from '@/api/workbench'
import CustomTable from '@/components/CustomTable2.vue'
import AddBill from './add-bill/index.vue'
import RenewRent from './renew-rent/index.vue'

import * as echarts from 'echarts'
import { onSecondConfirm } from '@/utils'
import { updateRentAPI } from '@/api/enterprise'
export default {
  components: { CustomTable, RenewRent, AddBill },

  data() {
    return {
      billVisible: false,
      renewVisible: false,
      baseInfo: {},
      outRentInfo: {},
      tableColumns: [
        { label: '企业名称', prop: 'enterpriseName' },
        { label: '租赁楼宇', prop: 'buildingName' },
        { label: '租赁时间', prop: 'startTime', custom: 'true' },
        { label: '操作', prop: 'operations', custom: 'true' }
      ],
      formData: {},
      income: null
    }
  },
  watch: {
    'baseInfo.annualIncomeArray': {
      deep: true,
      handler: function() {
        this.income.setOption({
          color: ['#3656ff', '#def4fc'],
          xAxis: {
            type: 'category',
            data: this.baseInfo.annualIncomeArray?.xmonth
          },
          yAxis: {
            type: 'value'
          },
          legend: {
            right: '5%'
          },
          series: [
            {
              data: this.baseInfo.annualIncomeArray.ybuilding,
              name: '物业费',
              type: 'bar',
              barWidth: '30%',
              stack: 'x'
            },
            {
              data: this.baseInfo.annualIncomeArray?.yparking,
              name: '行车收费',
              type: 'bar',
              barWidth: '30%',
              stack: 'x'
            }
          ]
        })
      }
    }
  },
  async created() {
    this.baseInfo = await getBaseInfoAPI()
    this.outRentInfo = await getRentInfoAPI()
  },
  mounted() {
    this.income = echarts.init(this.$refs.income)
  },
  methods: {
    onRentKeep(row) {
      this.formData.buildingId = row.buildingId
      this.formData.enterpriseId = row.enterpriseId
      const inputDate = new Date(row.endTime)
      inputDate.setDate(inputDate.getDate() + 1)
      this.formData.time = [inputDate, new Date('')]
      this.renewVisible = true
    },

    //   this.pickerOptions = {
    //     disabledDate(time) {
    //       return time.getTime() < inputDate - 3600 * 1000 * 24
    //     }
    //   }

    // handlerSuccess(res) {
    //   this.rentInfo.contractId = res.id
    //   this.rentInfo.contractUrl = res.url
    // },
    // onSubmit() {
    //   this.$refs.form.validate(async(isOk) => {
    //     if (isOk) {
    //       const [sTime, eTime] = this.rentInfo.startTime
    //       this.rentInfo.startTime = sTime
    //       this.rentInfo.endTime = eTime
    //       // 发请求
    //       await addRentAPI(this.rentInfo)
    //       // 提示用户
    //       this.$message.success('操作成功!')
    //       // 清空表单
    //       this.$refs.uploadRef.clear()
    //       // 关闭弹窗
    //       this.visible = false
    //       // 刷新列表
    //       this.$refs.table.getList()
    //     }
    // })
    // },
    onRentOut(row) {
      onSecondConfirm({
        content: '退租不可撤回,是否确认退租当前楼宇?',
        handler: async() => {
          // 调接口
          await updateRentAPI(row.id)
          // 提示用户
          this.$message.success('操作成功!')
          // 刷新列表
          this.$refs.table.getList()
        }
      })
    }
  }

}
</script>
<style lang="scss" scoped>
.app-main{
  background-color: #f4f6f8;
}
.container{
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  background-color:#f4f6f8;
  .left{
    flex-basis: 70%;
    margin-right: 20px;
    .pard-data{
    display: flex;
    justify-content: space-between;
    .label{
    color: rgb(144, 147, 153);
    margin-bottom: 12px;
    }
    .value{
    color: rgb(48, 48, 53);
    font-weight: 500;
    font-size: 24px;
    }
    }
    .chart-container{
      height: 300px;
    }
    .table-container{
      width: 100%;
    }

  }
  .right{
     flex-basis: 30%;
     margin-right: 20px;
    .fast-enter{
      display: flex;
      justify-content: space-between;
      .item{
        display: flex;
        text-align: center;
        flex-direction: column;
        cursor: pointer;
        .label{
            font-size: 12px;
            font-weight: 500;
            white-space: nowrap;
        }
        img{
           width: 44px;
           height: 44px;
           margin-bottom: 9px;
        }
      }
    }
  }
}
.info-wrapper{
    background-color: rgb(255, 255, 255);
    padding: 20px;
    margin-bottom: 20px;
    min-width: 260px;
    .title{
    font-size: 14px;
    color: rgb(48, 48, 53);
    font-weight: 500;
    margin-bottom: 20px;
}
}
</style>
